<template>
  <div class="home-container">
    <!-- 顶部导航 -->
    <VanNavBar title="首页" fixed />

    <!-- 搜索框 -->
    <div class="search-box" >
      <VanSearch v-model="searchValue" fixed placeholder="请输入搜索关键词" />
    </div>

    <!-- 轮播图 -->
    <VanSwipe style="margin-top :90px" :autoplay="3000" lazy-render>
      <VanSwipeItem v-for="(image, index) in images" :key="index">
        <img :src="image" alt="轮播图" class="swipe-image" />
      </VanSwipeItem>
    </VanSwipe>

    <!-- 列表内容 -->
    <div class="renqibang">
      <h3 style="text-align: center;">人气榜单</h3>
      <!-- 左右结构 -->
      <div class="renqibang-container">
        <!-- 左侧 -->
        <van-list
            class="scroll-list"
            finished-text="没有更多了"
        >
        <div class="renqibang-left card" v-for="item in data.shangpinxiangqing" @click="commodity(item)">
          <div style="
                      width: 140px;
                      height: 140px;
                      margin: 0 auto;
          ">
            <img  :src="item.img" alt="商品图片" class="swipe-image" />
          </div>
          <div>
            <div class="wenzishenlue" style="height: 40px;
                      line-height: 40px;
                      font-weight: bold;
                      font-size: .28rem;
                      color: rgba(0, 0, 0, .87);
          ">{{item.name}}</div>
            <div style="margin-top: .06rem;
                      font-size: .22rem;
                      line-height: .3rem;
                      color: rgba(0, 0, 0, .54);
          ">{{ item.fenlei }}</div>
            <div style="
          font-size: .28rem;
          color: #ea625b;
          height: 1.5em;
          line-height: 1.5em;
          position: relative;
          display: inline-block;
          ">￥{{item.jiage}}元</div>
            <div style="
                    width: 2rem;
                    background: #ea625b;
                    border-radius: .05rem;
                    text-align: center;
                    color: #fff;
                    font-size: .24rem;
                    padding: .16rem 0;
                    font-weight: 700;
                    margin: 0 auto;
          ">立即购买</div>
          </div>
        </div>
        </van-list>
    </div>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref} from 'vue';
import router from "@/router/index.js";
import request from "@/utils/request.js";

const data = reactive({
  pageNum: 1,
  pageSize: 10,
  shangpinxiangqing: [],
  tableData: [],
});
const searchValue = ref('');
const images = [
  'https://www.dowebok.com/demo/5510/images/02.jpg',
  'https://www.dowebok.com/demo/5510/images/01.jpg',
  'https://www.dowebok.com/demo/5510/images/05.jpg',
];

const commodity = (item) => {
  router.push(`/commodity/${item.id}`)
}

const shangpinxiangqing = () => {
  request.get('shangpinxiangqing/selectPage', {
    params: {
      pageNum: 1,
      pageSize: 10,
    }
  }).then(res => {
    data.shangpinxiangqing = res.data.list;
  }).catch(err => {
    ElMessage.error(err);
  });
}
shangpinxiangqing()
</script>

<style scoped>
.search-box {
  width: 100%;
  background-color: #f5f5f5;
  position:fixed;
  top:40px;
  z-index: 999;
}

.swipe-image {
  width: 100%;
  height: auto;
  display: block;
}

.renqibang-container {
  width: 100%;
}

.renqibang-left {
  display: inline-block;
  width: 48%;
  text-align: center;
  font-size: 24px;
  margin: 7px;
}
.wenzishenlue{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
